<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            height: 42rem;
            /* background: antiquewhite; */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #Histogram {
            width: 600px;
            height: 450px;
        }

        #Line_Chart {
            width: 600px;
            height: 450px;
        }
    </style>
</head>

<body>
    <div id="Histogram"></div>
    <div id="Line_Chart"></div>
</body>
<script>
    var myChart = echarts.init(document.getElementById("Histogram"), 'vintage');
    console.log(myChart);

    var option = {
        title: {
            show: true,
            text: '个人成绩柱状图'
        },
        tooltip: {
            formatter: function (params) {
                if (params.data.value >= 80) {
                    return `<div style="color:purple;">${params.seriesName}是:${params.data.value}分你很好 但是也要努力</div> `
                } else if (params.data.value >= 60) {
                    return `<div style="color:green;">${params.seriesName}是:${params.data.value}分刚好及格 所以要更加努力了</div> `
                } else {
                    return `<div style="color:yellow;">${params.seriesName}是:${params.data.value}分不及格了 以后要更加努力 好好学习</div> `
                }
            },

        },

        legend: {
            data: ['机试', '笔试']
        },
        xAxis: {
            data: ['第一周', '第二周', '第三周', '第四周']
        },
        yAxis: {
            // name: '分数',
            nameLocation: 'top',
            max: 100,
            min: 0
        },
        series: [
            {
                legendHoverLink: true,
                name: '机试',
                type: 'bar',
                data: [{
                    value: 80,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {
                       
                    },
                }, {
                    value: 65,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'green'
                    },
                    itemStyle: {
                        
                    },
                }, {
                    value: 55,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {
                       
                    },
                }, {
                    value: 45,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {
                       
                    },
                }]
            },
            {
                name: '笔试',
                type: 'bar',
                data: [{
                    value: 0,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {
                       
                    },
                },
                {
                    value: 60,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {
                       
                    },
                },
                {
                    value: 0,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {
                        
                    },
                },
                {
                    value: 42,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {
                        
                    },
                }]
            }
        ]
    };
    myChart.setOption(option)


    var myCharts = echarts.init(document.getElementById("Line_Chart"), 'vintage');
    option = {
        title: {
            text: '个人成绩折线图'
        },
        tooltip: {
            formatter: function (params) {
                if (params.data.value >= 80) {
                    return `<div style="color:purple;">${params.seriesName}是:${params.data.value}分你很好 但是也要努力</div> `
                } else if (params.data.value >= 60) {
                    return `<div style="color:green;">${params.seriesName}是:${params.data.value}分刚好及格 所以要更加努力了</div> `
                } else {
                    return `<div style="color:yellow;">${params.seriesName}是:${params.data.value}分不及格了 以后要更加努力 好好学习</div> `
                }
            },
        },
        legend: {
            data: ['机试', '笔试']
        },
        xAxis: {
            type: 'category',
            data: ['第一周', '第二周', '第三周', '第四周']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '机试',
                type: 'line',
                data: [{
                    value: 80,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {

                    },
                }, {
                    value: 65,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'green'
                    },
                    itemStyle: {

                    },
                }, {
                    value: 55,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {

                    },
                }, {
                    value: 45,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {

                    },
                }]
            },
            {
                name: '笔试',
                type: 'line',
                data: [{
                    value: 0,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {

                    },
                },
                {
                    value: 60,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {

                    },
                },
                {
                    value: 0,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {

                    },
                },
                {
                    value: 42,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'purple'
                    },
                    itemStyle: {

                    },
                }]
            }
        ]
    };
    myCharts.setOption(option)
</script>

</html>